<template>
  <div class="article-page">
    <div class="ap-header">
      <div>共 300 条记录</div>
      <el-button @click="openDrawer('add')" icon="el-icon-plus" type="primary" round>添加面经</el-button>
    </div>
    <!-- 下面是表格,  弄清楚 行和列 -->
    <el-table
      :data="mianjingList"
      border
      style="width: 100%">
      <el-table-column
        prop="stem"
        label="标题"
        width="300">
      </el-table-column>
      <el-table-column
        prop="creator"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="likeCount"
        label="点赞"
        width="100">
      </el-table-column>
      <el-table-column
        prop="views"
        label="浏览数"
        width="100">
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="更新时间">
      </el-table-column>
      <!-- 列的内容有两种方式更新，1. props 2. 插槽 -->
      <el-table-column label="操作" width="180">
        <!-- element-ui 官网没有更新， 使用测vue2.6之前的 旧插槽的语法 -->
        <!-- scope这个数据里面 是一个对象，属性比较多，我们关注的数据就 row这个， 其他的不要，那么直接来一个对象的解构赋值 -->
        <!-- 如果官网说插槽的名称 是 -， 这个表示是默认插槽，没有名称，我们用新语法绑定的时候就是 default -->
        <!-- <template slot-scope="scope"> -->
        <!-- <template slot-scope="{row}"> -->
        <!-- <template v-slot:default="{row}"> -->
        <template #default="{row}">
          <div class="table-btns">
            <el-button icon="el-icon-view" circle @click="openDrawer('preview', row)"></el-button>
            <i class="el-icon-edit-outline table-btns-edit" @click="openDrawer('edit', row)"></i>
            <el-tag type="danger" @click="delItem(row.id)">
              <i class="el-icon-delete"></i>
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 下面是分页插件 -->
    <el-pagination
      :current-page="current"
      :page-size="pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
    <!-- 下面是抽屉组件 -->
    <el-drawer
      size="50%"
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <div style="padding: 0 30px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="标题" prop="stem">
            <!-- ruleForm 对象里面的属性值 就要去后端接口文档里面找，和后端字段保持一致 -->
            <el-input v-model="ruleForm.stem"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <!-- https://www.npmjs.com/package/vue-quill-editor 跟着官网自己写步骤 -->
            <quill-editor v-model="ruleForm.content" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { interviewQueryRequest, interviewCreateRequest, interviewRemoveRequest, getMj, addItem } from '@/api/article'

export default {
  name: 'ArticleIndex',
  data () {
    return {
      mianjingList: [],
      current: 1,
      pageSize: 10,
      // 控制抽屉的显示和隐藏
      drawer: false,
      // 抽屉出来的方向 right to left 右到左
      direction: 'rtl',
      id: 0,
      // 抽屉的动态标题
      // drawerTitle: '',
      // 抽屉打开的类型  add  preivew edit
      drawerType: '',
      ruleForm: {
        stem: '',
        content: ''
      },
      rules: {
        // 有哪些规则自己去官网 el-form的校验里面找
        stem: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 在methods里面定义方法，在created里面调用，保持created钩子函数的简洁
    // 这个是函数调用， 传实参
    this.interviewQuery()
  },
  computed: {
    drawerTitle () {
      if (this.drawerType === 'add') {
        return '新增面经'
      }
      if (this.drawerType === 'preview') return '面经预览'

      return '修改面经'
    }
  },
  methods: {
    // 这里是函数声明，是形参，形式化的参数， 可以随便改
    async interviewQuery () {
      const res = await interviewQueryRequest({ current: this.current, pageSize: this.pageSize })
      console.log(res)
      this.mianjingList = res.data.rows
    },
    currentChange (value) {
      console.log(value)
      this.current = value
      this.interviewQuery()
    },
    sizeChange (value) {
      console.log(value)
      this.pageSize = value
      this.interviewQuery()
    },
    async  openDrawer (type, row) {
      // 新增和编辑都会执行这个函数

      console.log(type, row)
      this.drawer = true
      this.drawerType = type

      if (type === 'edit') {
        this.id = row.id
        const res = await getMj({ id: row.id })
        this.ruleForm.stem = res.data.stem
        this.ruleForm.content = res.data.content
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.ruleForm.stem = ''
          this.ruleForm.content = ''
        })
        .catch(_ => {})
    },
    submitForm (val) {
      this.$refs.ruleForm.validate(async (valide) => {
        if (valide) {
          try {
            if (this.drawerType === 'add') {
              // 这里就是检验成功的地方，发请求，新增一个面经
              await interviewCreateRequest(this.ruleForm)
            } else {
              //
              const res = await addItem({ id: this.id, stem: this.ruleForm.stem, content: this.ruleForm.content })
              console.log(res)
            }
            // 1.添加成功，关闭抽屉
            // this.drawer = false
            // // 2. 清空表单
            // this.ruleForm.stem = ''
            // this.ruleForm.content = ''
            this.cancel()
            // 3. 刷新列表页面
            this.interviewQuery()
          } catch (error) {

          }
        }
      })
    },
    cancel () {
      this.$refs.ruleForm.resetFields()
      this.drawer = false
    },
    // 为了简化页面上下滚动的操作，可以双击 delItem 这个单词，在按ctrl + D 可以快速选择页面上同名的单词，帮我，们快速跳转到指定位置
    async delItem (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 1. 先绑定事件，发请求，就先去看接口文档
        await interviewRemoveRequest({ id })
        // 删除成功以后，刷新页面---重新发请求
        this.interviewQuery()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.article-page {
  // padding: 15px;
  .ap-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e3e3;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .el-table {
    border-radius: 10px;
  }
  .table-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    .table-btns-edit {
      margin: 0 10px;
      font-size: 20px;
    }
    .el-tag {
      // 如果这个里面的样式不生效，那么有可能是样式穿透的问题，就涉及到 深度选择器 ::v-deep
    }
  }
  .el-pagination {
    text-align: center;
    margin-top: 15px;
  }
}

</style>
